<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ClipCascade</title>

    <!-- Bootstrap CSS (CDN) -->
    <link rel="stylesheet" href="/assets/css/bootstrap@3.3.7.min.css" />

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/assets/images/logo.png" />

    <!-- Your custom CSS (external) -->
    <link rel="stylesheet" href="/assets/css/style.css" />
  </head>
  <body>
    <!-- =======================================
       ===========  NAVIGATION BAR  ===========
       ======================================= -->
    <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">ClipCascade</a>
          <span
            id="max-message-size"
            class="navbar-text"
            style="margin-left: 15px"
          >
            Max Message Size: Loading...
          </span>
          <span id="username" class="navbar-text" style="margin-left: 15px">
            Hi, <span id="user-name">User</span>
          </span>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <!-- Update Link (ONLY SHOW IF ADMIN and new version is available) -->
          <li>
            <a
              href="https://github.com/Sathvik-Rao/ClipCascade/releases"
              id="update-link"
              target="_blank"
              rel="noopener noreferrer"
            >
              Update
            </a>
          </li>
          <!-- Advanced (ONLY SHOW IF ADMIN) -->
          <li>
            <a
              href="/admin/advance"
              id="advance-link"
              target="_blank"
              rel="noopener noreferrer"
            >
              Advance
            </a>
          </li>
          <!-- Change Username (ONLY SHOW IF ADMIN) -->
          <li>
            <a href="#" id="change-username-link">Change Username</a>
          </li>
          <!-- Change Password -->
          <li>
            <a href="#" id="change-password-link">Change Password</a>
          </li>
          <!-- Logoff -->
          <li>
            <a href="#" id="logout-link">Logoff</a>
          </li>
          <!-- LOGOFF FROM ALL DEVICES -->
          <li>
            <a href="#" id="logout-all-devices-link">Logoff from All Devices</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Main Container -->
    <div class="container">
      <noscript>
        <h2 style="color: #f00">
          Seems your browser doesn't support JavaScript!
          <br />
          WebSocket relies on JavaScript being enabled. Please enable JavaScript
          and reload this page!
        </h2>
      </noscript>

      <!-- =================================================
         ===========    USER (HOME) SECTION    ===========
         ================================================= -->
      <div id="user-section">
        <h2>Monitoring</h2>
        <hr />

        <div class="row">
          <div class="col-md-6">
            <form class="form">
              <div class="form-group">
                <label for="broker-url">WebSocket URL:</label>
                <input
                  type="text"
                  id="broker-url"
                  class="form-control"
                  placeholder="Enter WebSocket/Signaling URL"
                />
              </div>
              <div class="form-group">
                <button id="connect" class="btn btn-default" type="button">
                  Connect
                </button>
                <button
                  id="disconnect"
                  class="btn btn-default"
                  type="button"
                  disabled
                >
                  Disconnect
                </button>
              </div>
            </form>
            <div id="status-message" class="alert" style="display: none"></div>
          </div>
          <div class="col-md-6">
            <form class="form-inline">
              <div class="form-group">
                <label for="ws_text">
                  Broadcast cliptext to all devices
                  <br />
                  <small>
                    <strong>Note:</strong> This will only function when
                    encryption is disabled on the remote devices, as the server
                    does not possess the encryption key.
                  </small>
                </label>
                <input
                  type="text"
                  id="ws_text"
                  class="form-control"
                  placeholder="Enter some text"
                />
              </div>
              <button id="send" class="btn btn-default" type="button">
                Send
              </button>
            </form>
          </div>
        </div>

        <div class="row" style="margin-top: 30px">
          <div class="col-md-12">
            <div class="table-wrapper">
              <table
                id="conversation"
                class="table table-striped"
                style="display: none"
              >
                <thead>
                  <tr>
                    <th>Channel</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody id="channel"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- /#user-section -->

      <!-- ================================================
         ===========    ADMIN SECTION     ===============
         ================================================ -->
      <div id="admin-section">
        <h2>Admin Panel</h2>
        <hr />
        <p>
          <strong>Note:</strong> After editing or deleting a user, the server
          will automatically log out the associated session. If the user has an
          active WebSocket connection, a server restart will be required to
          terminate the connection. Additionally, the server enforces a unique
          username policy, preventing the creation of usernames that are
          currently in use or have been used. These usernames will be available
          for reuse after the server is restarted.
        </p>

        <div>
          <button id="load-users-btn" class="btn btn-primary">
            Load Users
          </button>
          <button
            id="open-add-user-modal-btn"
            class="btn btn-success"
            style="margin-left: 10px"
          >
            Add New User
          </button>
        </div>

        <div class="table-wrapper">
          <table
            id="users-table"
            class="table table-bordered table-striped"
            style="margin-top: 20px"
          >
            <thead>
              <tr>
                <th>Username</th>
                <th>Enabled</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody id="users-tbody">
              <!-- Populated dynamically -->
            </tbody>
          </table>
        </div>
      </div>
      <!-- /#admin-section -->
    </div>
    <!-- /.container -->

    <!-- =====================================================
       ===========    MODALS FOR ADMIN ACTIONS    ===========
       ===================================================== -->
    <!-- ==========  Modal for Adding a New User  ========== -->
    <div id="add-user-modal" class="modal">
      <div class="modal-content">
        <span class="modal-close" onclick="hideAddUserModal()">&times;</span>
        <h3>Add New User</h3>
        <form id="add-user-form">
          <div class="form-group">
            <label>Username</label>
            <input
              type="text"
              class="form-control"
              id="add-username-input"
              required
            />
          </div>
          <div class="form-group">
            <label>Password</label>
            <input
              type="password"
              class="form-control"
              id="add-password-input"
              required
            />
          </div>
          <div class="form-group">
            <label>Enabled</label>
            <select class="form-control" id="add-enabled-select">
              <option value="true">Enabled</option>
              <option value="false">Disabled</option>
            </select>
          </div>
          <button
            type="submit"
            class="btn btn-primary"
            style="margin-top: 10px"
          >
            Submit
          </button>
        </form>
      </div>
    </div>

    <!-- ==========  Modal for Editing a User  ========== -->
    <div id="edit-user-modal" class="modal">
      <div class="modal-content">
        <span class="modal-close" onclick="hideEditUserModal()">&times;</span>
        <h3>Edit User</h3>
        <form id="edit-user-form">
          <input type="hidden" id="edit-user-old-username" />
          <div class="form-group">
            <label>New Username</label>
            <input
              type="text"
              class="form-control"
              id="edit-user-new-username"
            />
          </div>
          <div class="form-group">
            <label>New Password</label>
            <input
              type="password"
              class="form-control"
              id="edit-user-new-password"
            />
          </div>
          <div class="form-group">
            <label>Enabled</label>
            <select class="form-control" id="edit-user-enabled">
              <option value="true">Enabled</option>
              <option value="false">Disabled</option>
            </select>
          </div>
          <button
            type="submit"
            class="btn btn-primary"
            style="margin-top: 10px"
          >
            Save
          </button>
        </form>
      </div>
    </div>

    <!-- ================================================
         ===========    Footer SECTION    ===============
         ================================================ -->
    <footer class="footer">
      <ul class="list-inline footer-links">
        <li>
          <a
            href="/help"
            id="help-link"
            target="_blank"
            rel="noopener noreferrer"
            >Help</a
          >
        </li>
        <li>
          <a
            href="https://github.com/Sathvik-Rao/ClipCascade"
            id="github-link"
            target="_blank"
            rel="noopener noreferrer"
            >GitHub</a
          >
        </li>
        <li>
          <a
            href="/donate"
            id="donate-link"
            target="_blank"
            rel="noopener noreferrer"
            >Donate</a
          >
        </li>
      </ul>
    </footer>

    <!-- ========================================
       ===========    JAVASCRIPT    ===========
       ======================================== -->
    <script src="/assets/js/jquery-3.1.1.min.js"></script>
    <script src="/assets/js/stomp.umd.min.js"></script>
    <script src="/assets/js/sha3.min.js"></script>
    <script src="/assets/js/main.js"></script>
  </body>
</html>
